{% extends 'starter.html' %}

{% block css %}
    <style>
        .permission-area tr.parent {
            background-color: #cae7fd;;
        }

        .menu-body tr.active {
            background-color: #f1f7fd;
            border-left: 3px solid #fdc00f;
        }

        .active {
            background-color: #cae7fd;;
        }

    </style>
{% endblock %}


{% block content %}

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-book"></i>菜单管理
                            <a href="{% url 'rbac:menu_add' %}" class="btn btn-success pull-right btn-sm"
                               style="padding: 1px 3px;color:white;">
                                <i class="fa fa-plus"></i>新建
                            </a>
                        </h3>
                    </div>
                    <div class="panel-body">
                        <table class="table table-bordered table-striped table-hover">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>图标</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody class="menu-body">
                            {% for menu in menu_list %}

                                <tr class="{% if menu_id == menu.pk|safe %}active{% endif %}">
                                    <td><a href="">{{ menu.name }}</a></td>
                                    <td><i class="fa {{ menu.icon }}"></i></td>
                                    <td>
                                        <a href="{% url 'rbac:menu_edit' menu.pk %}"><i class="fa fa-edit"></i></a>
                                        <a href="{% url 'rbac:menu_del' menu.pk %}"><i class="fa fa-remove"></i></a>
                                    </td>
                                </tr>

                            {% endfor %}


                            </tbody>
                        </table>


                    </div>
                </div>

            </div>
            <div class="col-md-9">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-cubes"></i>权限管理
                            <a href="" class="btn btn-primary pull-right" style="padding: 1px 3px;color:white;">
                                <i class="fa fa-scissors"></i>批量操作</a>
                            <a href="" class="btn btn-success pull-right" style="padding: 1px 3px;color:white;">
                                <i class="fa fa-plus"></i>新建</a>
                        </h3>
                    </div>
                    <div class="panel-body">
                        <table class="table table-bordered table-hover permission-area">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>URL</th>
                                <th>URL别名</th>
                                <th>菜单</th>
                                <th>所属菜单</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for permission in permission_list %}

                                <tr class="parent {% if permission.menus__name %}active{% endif %}">

                                    <td class="click_caret"><i class="fa fa-caret-down icon"></i> {{ permission.title }}
                                    </td>
                                    <td>{{ permission.url }}</td>
                                    <td>{{ permission.url_name }}</td>
                                    <td>是</td>
                                    <td>{{ permission.menus__name }}</td>

                                    <td>
                                        <a href=""><i class="fa fa-edit"></i></a>
                                        <a href=""><i class="fa fa-remove"></i></a></td>
                                </tr>
                                {% for child_permission in permission.children %}
                                    <tr class="">

                                        <td>{{ child_permission.title }}</td>
                                        <td>{{ child_permission.url }}</td>
                                        <td>{{ child_permission.url_name }}</td>
                                        <td>

                                        </td>
                                        <td>{{ child_permission.menus|default:'' }}</td>

                                        <td>
                                            <a href=""><i class="fa fa-edit"></i></a>
                                            <a href=""><i class="fa fa-remove"></i></a></td>
                                    </tr>
                                {% endfor %}


                            {% endfor %}


                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>

    </div>



{% endblock %}


{% block js %}
    <script>
        $('.click_caret').click(function () {
            $(this).parent().find('.icon').toggleClass('fa-caret-right');
            $(this).parent().nextUntil('.parent').toggleClass('hidden');
        })

    </script>

{% endblock %}



